<template>
  <zm-view ref="view" :background="useColor('theme')">
    <zm-navbar back-icon-color="#ffffff" :border-bottom="false" background="transparent" immersive @height="onHeight"></zm-navbar>
    <image class="bg-image" :src="useImage('/zuimei-film-oss/1.0.0/images/gift-giving-receive-bg.png')" mode="scaleToFill" />
    <view class="flex flex-col p-24 relative z-1" :style="{ marginTop: navbarHeight + 'px' }">
      <view class="flex">
        <u-image width="80rpx" height="80rpx" radius="50%" :src="orderInfo.headImg">
          <u-image slot="error" width="78rpx" height="78rpx" radius="50%" :src="useImage('/zuimei-film-oss/1.0.0/images/avatar.png')"></u-image>
        </u-image>
        <view class="flex flex-col ml-20 text-white">
          <text class="font-32 font-bold">{{ orderInfo.nickName }}</text>
          <text class="font-28">赠送您{{ orderInfo.detailList.length }}张{{ giftTypeText }}</text>
        </view>
      </view>
      <view class="gift-wrap mt-40">
        <view class="gift-top">
          <u-image width="100%" height="424rpx" radius="16rpx" :src="orderInfo.imageUrl"></u-image>
          <view class="flex font-30 font-bold mt-22 justify-center">
            <text>{{ orderInfo.blessWord }}</text>
          </view>
        </view>
        <view class="gift-bottom p-24">
          <view class="top-line"></view>
          <!-- 领取按钮,别人才显示 -->
          <view v-if="orderInfo.orderStatus == 0 && isNoSelf" class="flex p-35">
            <zm-button size="large" color="linear-gradient(113deg, #FFD97E 0%, #F9BE62 100%)" text-color="#7B3C0B" round block @click="handleReceiveGift">领取好礼</zm-button>
          </view>
          <!-- 礼物状态 -->
          <view v-else-if="!isReceiveSelf" class="flex flex-col items-center">
            <view class="font-56 text-666 font-bold">{{ statusContent.title }}</view>
            <view class="font-28 text-999 mt-24">{{ statusContent.tips }}</view>
          </view>
          <!-- 礼品查看 -->
          <view v-if="isReceiveSelf" class="flex flex-col">
            <block v-for="(item, index) in orderInfo.detailList" :key="index">
              <coupon v-if="item.giftType == 'coupon'" :info="item.info" :show-tag="false" from-type="giftGiving" custom-class="mb-20"></coupon>
              <film-card v-if="item.giftType == 'card'" :info="item.info" custom-class="mb-20"></film-card>
            </block>
          </view>
        </view>
      </view>
    </view>
    <zm-footer v-if="isReceiveSelf" z-index="10">
      <view class="p-24">
        <zm-button size="large" plain round @click="onClickAccount">前往账户查看</zm-button>
      </view>
    </zm-footer>
    <!-- 领取登录弹窗 -->
    <zm-dialog ref="dialog" :show.sync="showReceiveDialog" z-index="999" show-cancel-button async-close @confirm="onConfirmReceive" @cancel="onCancelReceive">
      <view class="flex flex-col items-center pb-30">
        <text class="font-36 font-bold">身份验证</text>
        <text class="text-999 font-26 mt-12">请输入手机号领取好友礼物</text>
        <view class="input-wrap">
          <input v-model="form.mobile" class="input" type="number" maxlength="11" placeholder="请输入手机号" />
        </view>
        <view class="input-wrap">
          <input v-model="form.code" class="input" type="number" maxlength="6" placeholder="请输入验证码" />
          <zm-button text width="170rpx" height="64rpx" round :disabled="codeBtn" @click="handleGetCode">{{ codeBtnText }}</zm-button>
        </view>
      </view>
    </zm-dialog>
    <u-code ref="code" :seconds="60" @start="onCodeCountdownStart" @change="onCodeCountdownChange"></u-code>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { mapActions, mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      form: {
        code: "",
        mobile: ""
      },
      codeBtn: false, // 是否禁用验证码按钮
      codeBtnText: "获取验证码", // 验证码按钮文字
      orderId: "",
      orderInfo: { detailList: [] },
      navbarHeight: 0,
      showReceiveDialog: false
    }
  },
  computed: {
    ...mapGetters(["userInfo", "cardName"]),
    // 赠送人不是自己
    isNoSelf() {
      return this.orderInfo.memberId != this.userInfo.memberId
    },
    // 领取人是自己
    isReceiveSelf() {
      return this.orderInfo.receiveMemberId && this.orderInfo.receiveMemberId === this.userInfo.memberId
    },
    // 提示内容
    statusContent() {
      const status = this.orderInfo.orderStatus
      const titles = {
        0: "等待好友领取",
        1: "礼物已退回",
        2: "礼物已退回",
        3: "礼物已领取"
      }
      const tipss = {
        0: "提示：礼物24小时未领取将被退回",
        1: "提示：超时未领取，已退回",
        2: "提示：超时未领取，已退回",
        3: `礼物已被${this.orderInfo.receiveName}领取`
      }
      return { title: titles[status], tips: tipss[status] }
    },
    giftTypeText() {
      const type = this.orderInfo.detailList[0]?.giftType
      const types = { coupon: "优惠券", card: this.cardName }
      return types[type] || "礼品"
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
  },
  onShow() {
    this.handleGetOrderInfo()
  },
  methods: {
    onHeight(h) {
      this.navbarHeight = h
    },
    async handleGetOrderInfo() {
      this.orderInfo.detailList = []
      const res = await uni.$api.send.getOrderInfo({ orderId: this.orderId })
      this.orderInfo = uni.$merge(this.orderInfo, res)
    },
    // 领取礼物
    async handleReceiveGift() {
      if (this.login) {
        uni.$toast({ type: "loading", content: "领取中...", duration: 10000 })
        await uni.$api.send.receiveOrder({ orderId: this.orderId })
        await this.handleGetOrderInfo()
        uni.$toast("已成功领取好友礼物")
      } else {
        this.showReceiveDialog = true
      }
    },
    // 去账户查看
    onClickAccount() {
      const type = this.orderInfo.detailList[0]?.giftType
      switch (type) {
        case "coupon":
          this.toView({
            url: "pages/person/coupon-list/coupon-list"
          })
          break

        case "card":
          this.toView({
            url: "pages/person/film-card-list/film-card-list"
          })
          break
      }
    },
    // 验证码登录
    onConfirmReceive({ close, done }) {
      if (!uni.$check.isPhoneNo(this.form.mobile)) {
        uni.$toast("手机号格式不正确，请重新输入")
        done()
        return
      }
      if (!this.form.code) {
        uni.$toast("请输入验证码")
        done()
        return
      }
      uni.$toast({ type: "loading", content: "领取中...", duration: 10000 })
      uni.$api.public
        .mobileLogin(this.form)
        .then(async () => {
          await this.getUserInfo()
          await uni.$api.send.receiveOrder({ orderId: this.orderId })
          await this.handleGetOrderInfo()
          uni.$toast({ content: "已成功领取好友礼物" })
          close()
        })
        .catch(() => {
          // uni.$toast(false)
          close()
        })
    },
    onCancelReceive({ close }) {
      close()
    },
    // 获取验证码
    async handleGetCode() {
      if (uni.$check.isPhoneNo(this.form.mobile)) {
        await uni.$api.public.sendSms({ mobile: this.form.mobile, codeType: "login" })
        this.$refs.code.start()
      } else {
        uni.$toast("手机号格式不正确，请重新输入")
      }
    },
    // 验证码倒计时
    onCodeCountdownChange(text) {
      this.codeBtnText = text
    },
    // 验证码倒计时开始
    onCodeCountdownStart() {
      this.codeBtn = true
    },
    ...mapActions(["getUserInfo"])
  }
}
</script>

<style lang="scss" scoped>
.bg-image {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
}
.gift-wrap {
  .gift-top {
    padding: 35rpx;
    overflow: hidden;
    position: relative;
    border-radius: 16rpx;

    &::before,
    &::after {
      top: 0;
      width: 50%;
      bottom: 0;
      content: "";
      z-index: -1;
      position: absolute;
    }
    &::before {
      left: 0;
      background-image: radial-gradient(circle at left bottom, transparent 26rpx, var(--page-color) 26rpx);
    }
    &::after {
      right: 0;
      background-image: radial-gradient(circle at right bottom, transparent 26rpx, var(--page-color) 26rpx);
    }
  }
  .gift-bottom {
    padding: 35rpx;
    overflow: hidden;
    position: relative;
    border-radius: 16rpx;
    &::before,
    &::after {
      top: 0;
      width: 50%;
      bottom: 0;
      content: "";
      z-index: -1;
      position: absolute;
    }
    &::before {
      left: 0;
      background-image: radial-gradient(circle at left top, transparent 26rpx, var(--page-color) 26rpx);
    }
    &::after {
      right: 0;
      background-image: radial-gradient(circle at right top, transparent 26rpx, var(--page-color) 26rpx);
    }
    .top-line {
      top: 0;
      left: 26rpx;
      right: 26rpx;
      position: absolute;
      border-top: 2rpx dashed var(--theme-color);
    }
  }
}
.input-wrap {
  width: 100%;
  height: 88rpx;
  display: flex;
  margin-top: 30rpx;
  padding-left: 70rpx;
  padding-right: 28rpx;
  background: #f4f6f7;
  align-items: center;
  border-radius: 48rpx;
  justify-content: space-between;
  .input {
    flex: 1;
    font-size: 30rpx;
    ::v-deep .input-placeholder {
      color: #999999;
      font-size: 30rpx;
    }
  }
}
</style>
